﻿@using ZhouYu.DreamTour.Model;
@using ZhouYu.DreamTour.Web.Models;
@{

    var GetHotelNameList = ViewBag.GetHotelNameList as List<Hotel>;
    var UserInfo = UserInfoContext.userInfoContext.UserInfo;
}
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>餐饮住宿-酒店预定详情页</title>
    <link href="~/css/style.css" rel="stylesheet" type="text/css" />
    <link href="~/css/common.css" rel="stylesheet" type="text/css" />
    <link href="~/layui-v2.5.4/layui/css/layui.css" />
    <script src="~/layui-v2.5.4/layui/layui.js"></script>
    <script src="~/layui-v2.5.4/layui/layui.all.js"></script>
    <link href="~/layui-v2.5.4/layui/css/layui.mobile.css" />
    <script src="~/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div class="top_hw clearfix">
        <div class="top_h clearfix">
            <div class="top_hl"><span>欢迎来到中国梦想游，让你的梦想全程免费自由行！</span> 预定热线：<b>0571-63322269</b></div>
            <div class="top_hr">
                @if (UserInfo == null)
                {
                    <a href="/Home/User_Register">会员注册</a>
                    <span>|</span> <a href="/Home/User_Login">登录</a>
                    <span>|</span> <a href="#">梦想收藏</a> <span>|</span> <a href="#">设为首页</a>
                    @*<a>
                            欢迎你，来到新世界旅行网！
                        </a>*@
                }
                else
                {
                    <a href="/Home/User_Center">会员中心</a>
                    <span>|</span> <a href="#">梦想收藏</a> <span>|</span> <a href="#">设为首页</a> <span>|</span> <a href="/Login/LoginOut">退出</a> <span>|</span>
                    <a>
                        欢迎你，<span>@UserInfo.User_Name</span>来到新世界旅行网！
                    </a>
                }
            </div>
        </div>
    </div>
    <div class="head_w">
        <div class="head_t clearfix">
            <div class="logo"><img src="~/images/logo.jpg"></div>
            <div class="rx_line"><img src="~/images/rx.jpg"></div>
        </div>
    </div>
    <div class="mainNav clearfix">
        <ul class="Nav_ul">
            <li><a href="/Home/Index">首页</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Route">旅游路线</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Scenic">旅游景点</a><img src="~/images/nav_line.jpg"></li>
            <li class="cur"><a href="/Home/CateringAccommodation">餐饮住宿</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Traffic_DatailsOne">交通线路</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Group">旅游团购</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Specialty">地方特产</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/AutoGenerationIntro">自动生成简介</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Team_Join">团队简介</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Itinerary_Details">行程导航</a></li>
        </ul>
    </div>
    <div class="b_wrap">
        <div class="current"><span>当前所在地：</span><a href="/Home/Index">首页</a> >> <a href="/Home/CateringAccommodation">餐饮住宿</a> >> <a href="#">杭州新延安饭店</a> >> <a href="#">酒店预定</a></div>
        <div class="clumn_w clearfix">
            <div class="clumn_l">
                <div class="clumn">
                    <div class="clumn_tit t01">餐饮住宿</div>
                    <div class="clumn_con">
                        <div class="cln_w">
                            <p>热门城市</p>
                            <div class="cln_c clearfix">
                                <a href="#">北京</a>
                                <a href="#">上海</a>
                                <a href="#">厦门</a>
                                <a href="#">成都</a>
                                <a href="#">西安</a>
                                <a href="#">黄山</a>
                                <a href="#">香港</a>
                                <a href="#">青岛</a>
                                <a href="#">桂林</a>
                                <a href="#">深圳</a>
                                <a href="#">三亚</a>
                                <a href="#">杭州</a>
                                <a href="#">丽江</a>
                                <a href="#">南京</a>
                                <a href="#">重庆</a>
                                <a href="#">苏州</a>
                                <a href="#">张家界</a>
                            </div>
                        </div>
                        <div class="cln_w">
                            <p>房价</p>
                            <div class="cln_c clearfix">
                                <a href="#">600元以上</a>
                                <a href="#">300-600元</a>
                                <a href="#">150-300元</a>
                                <a href="#">150元以下</a>
                            </div>
                        </div>
                        <div class="cln_w">
                            <p>酒店星级</p>
                            <div class="cln_c clearfix">
                                <a href="#">五星/豪华</a>
                                <a href="#">四星/高档</a>
                                <a href="#">三星/舒适</a>
                                <a href="#">经济/客栈</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clumn_r">
                <table class="cr_table" width="680" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td class="td01">酒店名称：</td>
                            <td>
                                <select class="t_st" name="select" id="HotelName">
                                    @for (int i = 0; i < GetHotelNameList.Count; i++)
                                    {
                                        <option value="@GetHotelNameList[i].HotelId">@GetHotelNameList[i].HotelName</option>
                                    }
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="td01">房间类型：</td>
                            <td>
                                <select class="t_st" name="select" id="Room_Type"></select>
                            </td>
                        </tr>
                        <tr>
                            <td class="td01">客户姓名：</td>
                            <td>
                                <label>
                                    <input type="text" name="textfield" id="User_Name">
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td class="td01">手机号码：</td>
                            <td>
                                <label>
                                    <input type="text" name="textfield2" id="Telphone"><span id="TelphoneInfo" style="margin-left:2%"></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td class="td01">身份证号：</td>
                            <td>
                                <label>
                                    <input type="text" name="textfield3" id="IdCard"><span id="IdCardInfo" style="margin-left:2%"></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="td01">
                                <div class="rz_clu">
                                    入住人数：&nbsp;&nbsp;
                                    <label>
                                        <input type="text" name="textfield4" id="RoomInto_Number">
                                    </label>
                                </div>
                                <div class="rz_clu">
                                    入住日期：
                                    <label>
                                        <input type="text" name="textfield4" id="IntoTime">
                                    </label>
                                </div>
                                <div class="rz_clu">
                                    退房日期：
                                    <label>
                                        <input type="text" name="textfield4" id="OutTime">
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="td01">特殊要求：</td>
                            <td class="tarea"><textarea name="textarea" id="SpecialRequest" cols="45" rows="5"></textarea></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>
                                <a href="javascript:history.go(-1)">
                                    <input type="button" value="取 消" style="background-color:blue;color:white;width:19%;height:17%;border-radius:5px;padding-top:0.3%;margin-top:2%" />
                                </a> &nbsp;&nbsp;<a href="#" id="commit"><img src="~/images/tjbd.jpg"></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <input type="hidden" id="Order_No" name="Order_No" value="" />
            </div>
        </div>
    </div>
</body>
</html>
<script>

    var IdCard = false;
    var Telphone = false;

    $(function () {
        //身份证失去焦点事件
        $("#IdCard").blur(function () {
            IdCard = isCardNo();
        });
        //手机号码失去焦点事件
        $("#Telphone").blur(function () {
            Telphone = CheckTelphone();
        });
    });


    //layui时间控件
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#IntoTime' //指定元素
        });
        laydate.render({
            elem: '#OutTime' //指定元素
        });
    });


    //初始化二级下拉框
    var data = {};
    data.HotelId = $("#HotelName").val();
    var Parent = $("#Room_Type");
    $.ajax({
        url: "/Hotel/GetRoom_TypeByHotelId",
        type: "post",
        data: data,
        success: function (result) {
            var myHTML = "";
            Parent.html("");//赋值之前先清空
            $.each(result.data, function (i, da) {
                myHTML += "<option value=" + da.Room_Id + ">" + da.Room_Type + "</option>";

            });
            Parent.append(myHTML);
        }
    });

    //酒店下拉框更改事件
    $("#HotelName").change(function () {
        //绑定二级下拉框
        var data = {};
        data.HotelId = $("#HotelName").val();
        var Parent = $("#Room_Type");
        $.ajax({
            url: "/Hotel/GetRoom_TypeByHotelId",
            type: "post",
            data: data,
            success: function (result) {
                var myHTML = "";
                Parent.html("");//赋值之前先清空
                $.each(result.data, function (i, da) {
                    myHTML += "<option value=" + da.Room_Id + ">" + da.Room_Type + "</option>";

                });
                Parent.append(myHTML);
            }
        });
    });


    //提交按钮点击事件
    $("#commit").click(function () {
        //进行非空验证
        if (CheckAllInfoIsNull()) {
            //获取页面值
            var data = {};
            data.HotelId = $("#HotelName").val();
            data.Room_Id = $("#Room_Type").val();
            data.User_Name = $("#User_Name").val();
            data.Telphone = $("#Telphone").val();
            data.IdCard = $("#IdCard").val();
            data.RoomInto_Number = $("#RoomInto_Number").val();
            data.IntoTime = $("#IntoTime").val();
            data.OutTime = $("#OutTime").val();
            data.SpecialRequest = $("#SpecialRequest").val();
            var Order_No = $("#Order_No").val();
            $.ajax({
                url: "/Hotel/AddHotelOrderInfo?Order_No="+Order_No,
                type: "post",
                data: data,
                success: function (result) {
                    if (result.Success) {
                        layer.msg('提交成功！请注意查收信息！', {
                            title: '提示框',
                            icon: 1,
                            time: 1000
                        }, function () {
                            //提交成功则跳转订单中心
                            location.href = "/Home/User_Order";
                            layer.close(index);
                        });
                    }
                    else {
                        layer.msg('提交失败！', {
                            title: '提示框',
                            icon: 0,
                            time: 1000
                        });
                    }
                }
            });
        }
    });


    //校验身份证
    function isCardNo() {
        //var IdCard = $("#IdCard").val();
        if ($.trim($('#IdCard').val()).length == 0) {
            $("#IdCardInfo").text("身份证号码不能为空！");
            $("#IdCardInfo").css("color", "red");
            return false;
        }
        var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (pattern.test($("#IdCard").val())) {
            $("#IdCardInfo").text("√");
            $("#IdCardInfo").css("color", "green");
            return true;
        }
        else {
            $("#IdCardInfo").text("身份证号格式不正确！");
            $("#IdCardInfo").css("color", "red");
            return false;
        }
    }


    //检查手机号11位
    function CheckTelphone() {
        var tel = $("#Telphone").val();
        if (tel == "") {
            $("#TelphoneInfo").text("手机号不能为空！");
            $("#TelphoneInfo").css("color", "red");
            return false;
        }
        var reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
        if (reg.test(tel)) {
            $("#TelphoneInfo").text("√");
            $("#TelphoneInfo").css("color", "green");
            return true;
        } else {
            $("#TelphoneInfo").text("手机号必须为11位！");
            $("#TelphoneInfo").css("color", "red");
            return false;
        }
    }


    //点击提交按钮时进行非空验证
    function CheckAllInfoIsNull() {
        if ($("#User_Name").val() == "") {
            layer.msg('客户姓名不能为空！', {
                title: '提示框',
                icon: 1,
            });
            return false;
        }
        if ($("#Telphone").val() == "") {
            layer.msg('手机号码不能为空！', {
                title: '提示框',
                icon: 1,
            });
            return false;
        }
        if ($("#IdCard").val() == "") {
            layer.msg('身份证号码不能为空！', {
                title: '提示框',
                icon: 1,
            });
            return false;
        }
        if ($("#RoomInto_Number").val() == "") {
            layer.msg('入住人数不能为空！', {
                title: '提示框',
                icon: 1,
            });
            return false;
        }
        if ($("#IntoTime").val() == "") {
            layer.msg('入住日期不能为空！', {
                title: '提示框',
                icon: 1,
            });
            return false;
        }
        if ($("#OutTime").val() == "") {
            layer.msg('退房日期不能为空！', {
                title: '提示框',
                icon: 1,
            });
            return false;
        }
        if ($("#SpecialRequest").val() == "") {
            layer.msg('如果没有特殊要求请填写无！', {
                title: '提示框',
                icon: 1,
            });
            return false;
        }
        return true;
    }

     //动态生成订单号
    function GetDateNow() {
        var vNow = new Date();
        var sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        document.getElementById("Order_No").value = sNow;
    }
    GetDateNow();
</script>
